<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: liuyq
 * @LastEditTime: 2021-09-22 15:16:56
-->
<template>
  <!-- 2.设置图表容器 容纳图表 -->
  <!-- 如何在vue中设置dom节点 ref="" -->
  <div ref="root" style="height: 150px"></div>
</template>

<script>
// 从g2plot对象中引入折线图构造函数
import { Line } from "@antv/g2plot";
// 1.引入组件库
export default {
  data() {
    return {};
  },
  // dom节点创建完毕 但是没有挂载 获取不到dom节点
  created() {

  },
  // 在onMounted之后执行 页面dom节点创建完毕 挂载完毕 获取dom节点
  mounted() {
    this.initCharts();
  },
  methods: {
    // 封装图表方法
    initCharts() {
      // 3.创建一个图表实例
      // this.$refs['root'] 获取dom节点 ref = 'root'
      let line = new Line(this.$refs["root"], {
        data: [
          { year: "1991", value: 3 },
          { year: "1992", value: 4 },
          { year: "1993", value: 3.5 },
          { year: "1994", value: 5 },
          { year: "1995", value: 4.9 },
        ],
        xAxis: {
          label: {
            rotate: -45,
            offset: 25,
            style: {
              fill: "white",
              fontFamily: "TencentSans",
              fontSize: 16,
            },
          },
        },
        xField: 'year',
        yField: 'value',
        color: 'cyan'
      });
      // 4.渲染
      line.render()
    },
  },
};
</script>
